<template>
    <el-dialog :title="dataForm.msgTypeDesc" destroy-on-close :close-on-click-modal="false" :before-close="closeDailog"
        :visible.sync="visible" :modal="true" center class="nopadding">
        <div>
            <section class="content">{{dataForm.msgContent}}</section>

            <div class="files">
                <div class="file" v-for="(item,index) in dataForm.files" :key="index" @click="download(item)">
                    <div class="fileimg">
                        <!-- <img :src="item.fileUrl" alt="图标"> -->
                        <d2-icon name="file" style="font-size:30px"></d2-icon>
                    </div>
                    <div class="filedesc">
                        <div>{{item.fileName}}</div>
                        <div>{{item.fileSize}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div style="text-align:right;margin-bottom:5px;">
            <el-tag type="success" style="margin-right:5px;">来自：{{dataForm.sendName}} 的消息</el-tag>
            <el-tag style="margin-right:5px;">发送时间: {{dataForm.createdTime}}</el-tag>
            <el-tag type="info" style="margin-right:5px;">消息级别: {{dataForm.msgLevelDesc}}</el-tag>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeDailog">关闭</el-button>
            <el-button type="primary" @click="readMsg()">确定</el-button>
        </span>
    </el-dialog>
</template>
<script>
    import * as messageinfoService from '@/api/chat/messageinfo'
    import * as messageSeeRecordService from '@/api/chat/messageseerecord'
    import * as fileService from '@/api/file/file'
    export default {
        data() {
            return {
                visible: true,
                dataForm: {
                    id: '',
                    msgContent: '',
                    sendName: '',
                    msgLevelDesc: '',
                    msgType: '',
                    msgTypeDesc: '',
                    recName: '',
                },
                files: [1, 2, 3, 4, 5, 6, 7]
            }
        },
        methods: {
            init(id) {
                this.dataForm.id = id || 0
                this.visible = true
                this.$nextTick(() => {
                    messageinfoService.getmessageinfoinfo(this.dataForm.id).then(data => {
                        this.dataForm = data
                    });
                })
            },
            readMsg() {
                if (this.dataForm.id) {
                    this.$emit('readMsg', this.dataForm.id)
                    this.visible = false
                }
            },
            // download(file) {
            //     if (file) {
            //         window.location.href = file.fileUrl;
            //     }
            // }

            // 下载文件方法
            download(file) {
                if (file) {
                    let params = "";
                    params = params + "fileIds=" + file.pkFile + "&"
                    params = params + "zip="
                    fileService.download(params).then(data => {
                        this.downloadFile(data, file.fileName, file.mimeType)
                    })
                } else {
                    this.$message.error("文件参数错误！")
                }
            },
            // 下载文件
            downloadFile(data, fileName, fileType = 'application/octet-stream') {
                if (!data) {
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data], {
                    type: fileType
                }))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName)
                document.body.appendChild(link)
                link.click()
            },
            closeDailog() {
                // this.$refs['dataForm'].resetFields()
                this.visible = false
            },
        }
    }
</script>
<style scoped>
    .name {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
    }

    .content {
        font-size: 16px;
        text-indent: 32px;
        min-height: 300px;
    }

    .files {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 15px 0px;
    }

    .fileimg {
        max-width: 30px;
        height: 30px;
    }

    .fileimg>img {
        width: 100%;
        height: 100%;
    }

    .file {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        font-size: 10px;
        border: 1px solid rgb(206, 205, 205);
        border-radius: 4px;
        margin-bottom: 5px;
        padding: 5px;
        margin-right: 5px;
        cursor: pointer;
        user-select: none;
    }

    .filedesc {
        margin-left: 20px;
        min-width: 80px;
        text-align: right;
    }

    .filedesc div:first-child {
        height: 18px;
        line-height: 18px;
        font-size: 14px;
    }

    .filedesc div:last-child {
        height: 12px;
        line-height: 12px;
    }
</style>